<template>
  <div class="service">
    <div class="charge-title"> 
      <i class="el-icon-arrow-left" @click=toPage()></i>
      <span class=jiaofei-text> 我要报修 </span>
    </div>
    <div class="type-box">
    <i class="el-icon-s-tools"></i>
    <div class="type-text">请选择报修类型</div>
    <div class="type">
      <el-select v-model="value" placeholder="入室维修">
    <el-option 
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>
    </div>
    </div>
    <div class="type-info">
      <div class="type-info-address">
         <div class="type-info-text">报修地址</div>
          <div class="input"> <el-input placeholder="请输入报修地址" v-model="inputaddress" clearable></el-input></div>
      </div>
       <div class="type-info-address">
         <div class="type-info-text">联系人</div>
          <div class="input"> <el-input placeholder="请输入联系人" v-model="inputpeople" clearable></el-input></div>
      </div>
      <div class="type-info-address">
         <div class="type-info-text">联系电话</div>
          <div class="input"> <el-input placeholder="请输入联系电话" v-model="inputnumber" clearable></el-input></div>
      </div>
      
    </div>
  
    <div class="type-project">
      <div class="type-info-address">
        <i class="el-icon-s-tools"></i>
        <div class="type-text">请选择报修项目</div>
      </div>
      <div class="charge-box">
          <div class="kindcharge"  v-for="(item,index) in chargelist" :key="index" >
          <div class="kinds" @click="changecolor($event)"> <i :style="{color:item.color}"  :class=item.class class="i" id="123" ></i>  <br>{{item.text}}
          </div>
        </div>
      </div>
    </div>
    <div class="typetextarea">
        <div class="type-info-address">
        <i class="el-icon-s-tools"></i>
        <div class="type-text">请描述详细内容</div>
      </div>
      <div class="textarea">
        <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      </div>
      
    </div>
    <div class="commit" @click=commit() >提 交</div>
  </div>

</template>

<script>
export default {
  name: 'Repair',
  data() {
      return {
        inputaddress: '',
        inputpeople:'',
        inputnumber:'',
        selectproject:'',
        textarea: '',
        options: [{
          value: '选项1',
          label: '入室维修'
        }, {
          value: '选项2',
          label: '公关区域'
        }, ],
        value: '',
        chargelist:[
            {
              text:"水电报修",
              class:"el-icon-s-opportunity",
              color:"#8ab6d6"
              
            },
            {
              text:"家电维修",
              class:"el-icon-s-home",
              color:"#fed049",
             
            },
            {
              text:"门窗维修",
              class:"el-icon-s-shop",
               color:"#206a5d"
            },
            {
              text:"管道疏通",
              class:"el-icon-s-open",
              color:"#b4a5a5"
              
            },
            {
              text:"门锁换新",
              class:"el-icon-s-data",
              color:"#926e6f",
             
            },
            {
              text:"其他",
              class:"el-icon-menu",
               color:"#EFAF3F"
            },
          ]
      }
    },
  methods: {
      changecolor(e){
       let div = document.getElementsByClassName("kinds");
       div.forEach((item) => {
        //  console.log(item);
        item.style.backgroundColor='#F7F7F7';
        // item.style.color = 'green';
      },)
      if(e.target.id=='123'){
        e.target.parentElement.style.backgroundColor='rgb(201, 200, 200)';
        console.log(1223);
        this.selectproject=e.target.parentElement.innerText;
      }
      else{
          e.target.style.backgroundColor='rgb(201, 200, 200)';
           this.selectproject=e.target.innerText;
           console.log(12345);
          
      }
      // console.log(123);
     
      },

     toPage(text){
       this.selectcharge=text;
       console.log(this.selectcharge);
       this.$router.push({
      path: '/Services'
    })
    },
    commit(){
        this.$confirm('订单详细信息'+'<br>'
        +'报修类型：'+this.value+'<br>'
        +'报修项目：'+this.selectproject+'<br>'
        +'报修地址：'+this.inputaddress+'<br>'
        +'联系电话：'+this.inputnumber+'<br>', '是否确定提交订单？', {
          customClass: 'message-logout',
           dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            showClose: true,
            type: 'success',
            message: '创建订单成功!'
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '已取消'
          });          
        });
    }
},

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.message-logout {
    width: 300px;
    margin-top:100px;
    background-color:#fffbdf;
  }
</style>
<style scoped>

.charge-box{
       display: flex;
       align-items: center;
       width:100%;
       flex-wrap: wrap;
       margin-left:22px;
  }
.kindcharge{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* width:25%; */
      padding-bottom: 2px;
  }
  .kinds{
  height:90px;
  width:90px;
   background-color: #F7F7F7; 
   margin: 3px 8px 5px 4px;
   display: block;
   text-align: center;
   font-size:8px;
  border-radius: 20px;
   /* color:rgb(99, 99, 99); */
  box-shadow: 1px 1px 5px #cbcac9;
}

.i{
  font-size:30px;
  margin-top:25px;
  margin-bottom: 10px;
}
 .type-box{
   display: flex;
   height:50px;
   width:345px;
   margin-top:30px;
   margin-left:15px;
  justify-content: space-between;
  border-radius: 10px;
  background-color: whitesmoke;
  box-shadow: 0 2px 20px  rgba(233, 233, 233, 0.2) inset;
}
.el-icon-s-tools{
  color:#DC6C44;
  font-size:24px;
  margin-top:13px;
  margin-left:7px;
}

.type-text{
   height:20px;
   width:120px;
   font-size:15px;
   margin-top:14px;
   margin-left:7px;
 }
 .type{
  margin-top: 5px;
  margin-right: 20px;
}
.type-info{
  height:185px;
  width:345px;
  margin-top:10px;
  margin-left:15px;
  border-radius: 10px;
  background-color: whitesmoke;
   box-shadow: 0 2px 20px  rgba(233, 233, 233, 0.2) inset;
}
.type-info-address{
  display: flex;
  height:60px;
  /* background-color: thistle; */
}
.type-info-text{
  height:20px;
  width:80px;
  margin-top:20px;
  margin-left:17px;
  font-size: 15px;
}
.input{
  width:230px;
  height:40px;
  margin-top:10px;
}
el-input >>> .el-input{
  border-radius: 10px;
}
.el-divider{
  margin-top:1px;
}
.type-project{
  height:280px;
  width:345px;
  margin-top:10px;
  margin-left:15px;
  border-radius: 10px;
  background-color: whitesmoke;
   box-shadow: 0 2px 20px  rgba(233, 233, 233, 0.2)inset;
}
.typetextarea{
  height:165px;
  width:345px;
  margin-top:10px;
  margin-left:15px;
  border-radius: 10px;
  background-color:whitesmoke;
   box-shadow: 0 2px 20px rgba(233, 233, 233, 0.2)inset;
}
 .textarea{
  width:305px;
  margin-left:20px;
  border-radius: 10px;
 }
 .jiaofei-text{
   width:100px;
   margin-left:110px;
 }
  .el-icon-arrow-left{
    font-size:18px;
    margin-top:27px;
    font-weight: bold;
    margin-left: 20px;
  }
  .commit{
  text-align: center;
  height:45px;
  width:345px;
  margin-top:10px;
  margin-left:15px;
  border-radius: 10px;
  background-color: rgb(201, 200, 200);
  line-height: 45px;
  font-weight: bold;
  }
 
</style>
